<!--
	危化企业类型
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="enterprise-type">
		<!-- <el-radio-group v-model="enterpriseType" @change="onChange">
			<el-radio v-for="(item, index) in list" :key="index" :label="item.value">{{ item.label || '' }}</el-radio>
		</el-radio-group> -->
		<el-checkbox-group v-model="enterpriseType" @change="onChange">
			<el-checkbox v-for="(item, index) in list" :key="index" :label="item.value">{{ item.label || '' }}</el-checkbox>
		</el-checkbox-group>
		<el-divider class="divider" border-style="dashed" />
		<div class="legend">
			<div class="legend-title">
				<el-divider direction="vertical" />图例
			</div>
			<ul class="legend-list">
				<li class="legend-list-item" v-for="(item, index) in list" :key="index">
					<span class="legend-list-item-icon" :style="{ backgroundColor: item.color || false }"></span>
					{{ item.label || '' }}
				</li>
			</ul>
		</div>
	</div>
</template>

<script setup name="EnterpriseType">
// 组件事件监听
const emit = defineEmits(['change']);

// 当前类型
let enterpriseType = ref(['0', '1', '2']); //'0'
// 类型列表
const list = [
	{ label: '小型', value: '0', color: '#E32EFF' },
	{ label: '中型', value: '1', color: '#25FF82' },
	{ label: '大型', value: '2', color: '#FF2525' },
];
// 选项选择切换事件
const onChange = (value) => {
	// 修改当前类型
	emit('change', value);
}
// 定义抛出内容
defineExpose({ onChange });
</script>

<style lang="scss" scoped>
.enterprise-type {
	padding: 5px;
	color: #FFFFFF;

	// 类型选择
	.el-checkbox-group,
	.el-radio-group {
		padding: 0 15px;

		.el-checkbox,
		.el-radio {
			color: #FFFFFF;
			font-size: 18px;
			margin-bottom: 12px;
		}

		:deep(.el-checkbox) {
			.el-checkbox__inner {
				width: 21px;
				height: 21px;

				&::after {
					height: 12px;
					width: 8px;
				}
			}

			.el-checkbox__label {
				font-size: 18px;
			}
		}
	}

	.divider {
		border-color: #475ADB;
		margin: -5px 0 12px;
	}

	// 图例
	.legend {
		&-title {
			font-size: 18px;

			.el-divider {
				border-width: 3px;
				margin-top: -3px;
			}
		}

		// 图例列表
		&-list {
			margin: 12px auto 0;
			padding: 0 15px;
			font-size: 16px;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: center;

			&-item {
				width: 33.33%;
				margin-bottom: 12px;

				&-icon {
					display: inline-block;
					vertical-align: middle;
					width: 20px;
					height: 12px;
					border-radius: 5px;
					margin-top: -2px;
					margin-right: 10px;
				}
			}
		}
	}
}
</style>